<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="upload">
    当前用户：${userInfo.username}
    <form action="${ctx}/images/uploadimg" enctype="multipart/form-data" method="post" id="imgform">
        <div class="image_container">
            <img id="preview" style="height:130px;width:117px;border-width:0px;"/>
        </div>
        <input name="fileup" id="file_upload" type="file" />
        <input name="host" value="${userInfo.username}" type="hidden">
<%--        <button id="sub" type="submit" value="上传" />--%>
        <button id="sub" type="submit">上传头像</button>
    </form>
</div>

<div id="showhead" style="width: 200px;height: 200px;border: 1px solid black;">
    <img id="img" src="${fileurl}" style="width: 200px;height: 200px;"/>
</div>

<script src="${ctx}/js/jquery-3.6.0.js"></script>
<script>
    // 选择图片，并在div中显示
    $(function () {
        $("#file_upload").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");

            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        })

        <%--$("#sub").click(function () {--%>
        <%--    $("#preview").attr('src',${fileurl});--%>
        <%--})--%>




    });
</script>

</body>

</html>
